<template>
	<view class="container" v-if="windowHeight">
		<view class="row main">
			<scroll-view :scroll-y="true" class="col cate" :style="{height: windowHeight}">
				<view class="row item" :class="index==currentCategoryIndex?'actice':''" v-for="(item,index) in categoryData"
				 v-bind:key="index" @click="changeCate" :data-index="index">
					{{item.name}}
				</view>
			</scroll-view>
			<scroll-view :scroll-y="true" class="col goods-list" :style="{height: windowHeight}" @scrolltoupper="scrollToUpper"
			 @scrolltolower="scrollToLower">
				<view class="col goods-item" v-for="(item,index) in goodsList" v-bind:key="index">
					<view class="row goods-header">
						<image :src="item.goods_naming.member_avatar?item.goods_naming.member_avatar:url+'/static/imgs/user-color.png'"></image>
						<view class="user-name">【{{item.goods_naming.name?item.goods_naming.name:'未冠名'}}】</view>
						<view class="goods-name">{{item.name}}</view>
					</view>
					<view class="row goods-content">
						<image class="cover-image" :src="item.image" mode="aspectFill"></image>
						<view class="col goods-content-main">
							<view class="description">
								<text v-if="item.goods_naming.title">{{item.goods_naming.title}}</text>
								<view v-else class="col status-none">
									<text>未冠名</text>
									<text>{{item.goods_price}}元即可冠名。</text>
								</view>
							</view>
							<view class="row">
								<view class="price">¥{{item.goods_price}}</view>
								<view class="row operate auto-left" v-if="item.sale_status==1">
									<view class="button button-active" @click="chooseGoods" :data-index="index">选他</view>
								</view>
								<view class="row operate auto-left" v-else>
									<image class="goods-status-none" :src="url+'/static/imgs/goods-status-none.png'"></image>
								</view>
							</view>
						</view>
					</view>
				</view>
				<view class="row paginate">
					<text>
						<block>{{config.show_loading?config.loading_msg:''}}</block>
						<block>{{config.show_finish?config.finish_msg:''}}</block>
						<block>{{config.show_empty?config.empty_msg:''}}</block>
					</text>
				</view>
			</scroll-view>

		</view>

	</view>
</template>
<script>
	var app = getApp();
	import http from "../../../../common/js/request.js";
	import common from "../../../../common/js/function.js";
	export default {
		data() {
			return {
				config: {}, //分页配置
				busy: false, //当前上拉加载的忙碌状态
				windowHeight: false,
				categoryData: [],
				goodsList: [],
				url: app.globalData.baseImgUrl,
				store_id: app.globalData.storeId,
				currentCategoryIndex: 0,
			}
		},
		onLoad() {
			var that = this;

			uni.getSystemInfo({
				success: function(res) {
					console.log(res)
					that.windowHeight = res.windowHeight + 'px'
				}
			});
		},
		onShow() {
			this._load();
		},
		methods: {
			_load() {
				var that = this;
				that.goodsList = [];
				that.categoryData = [{
					id: 0,
					name: '全部'
				}];
				that.getCategoryData(() => {
					that._setConfig(() => {
						that.getGoodsList();
					});
				});
			},
			_setConfig(callback = '') {
				var that = this;
				that.config = common.getPageConfig();
				typeof callback == 'function' ? callback() : ''
			},
			//获取商品分类
			getCategoryData(callback) {
				var that = this;
				http.post('/api/v1/goods/class_list', {
					store_id: that.store_id
				}, (res) => {
					that.categoryData = that.categoryData.concat(res.datas);
					callback();
				});
			},
			//获取商品列表
			getGoodsList() {
				var that = this;
				if (that.config.show_finish) return false;
				that.config.show_loading = true; //展示loading
				var current_page = that.config.current_page;
				http.post('/api/v1/goods/goods_list', {
					class_id: that.categoryData[that.currentCategoryIndex].id,
					page: current_page,
					store_id: that.store_id,
					if_gift: 1
				}, res => {
					that.goodsList = that.goodsList.concat(res.datas);
					that.config.show_loading = false; //关闭loading
					if (res.datas.length == 0) {
						if (current_page == 1) {
							that.config.show_empty = true;
						} else {
							that.config.show_finish = true;
						}
					}
					that.busy = false;
				});
			},
			scrollToLower() {
				var that = this;
				console.log('toBottom');
				if (that.busy == true) return false;
				that.busy = true;
				that.config.current_page += 1;
				that.getGoodsList();
			},
			scrollToUpper() {

			},
			//分类切换
			changeCate(e) {
				var that = this;
				that.currentCategoryIndex = e.currentTarget.dataset.index;
				that.goodsList = [];
				that.busy = false;
				that._setConfig(() => {
					that.getGoodsList();
				});
			},
			//选择商品
			chooseGoods(e) {
				var that = this;
				var index = e.currentTarget.dataset.index;
				app.globalData.giveGoodsInfo = that.goodsList[index];
				//console.log('app.globalData.giveGoodsInfo', app.globalData.giveGoodsInfo);
				uni.navigateBack();
			}
		}
	}
</script>

<style>
	@import url("../../../../common/css/goods-category.css");

	.operate .button {
		padding: 0rpx 12rpx;
		display: flex;
		align-items: center;
		color: #fff;
		font-size: 28rpx;
		height: 40rpx;
		background: rgba(182, 182, 182, 1);
		border-radius: 10rpx;
	}

	.operate .button-active {
		background: #FF9D11;
		color: #fff;
	}
</style>
